<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
</head>

<body>
<!-- 网页的头部 -->
<div id="header">
    <div id="header-1">
        <div class="left">
            <p>嗨，欢迎来订花乐！</p>
            <a href="" style="color: rgb(136, 78, 34);">
                <i class="iconfont">&#xe62b;</i>
            </a>
            <a href="" id="weixin">关注微信</a>
            <img src="./images/gz.jpg" alt="" id="img">
        </div>
        <div class="right">
            <a href="./login.html" class="r-1">你好，请登录</a>
            <a href="./register.html" class="r-2" style="color: rgb(136, 78, 34);">免费注册</a>
            <span class="s-1"></span>
            <a href="./order.html" class="r-3">订单查询</a>
            <span class="s-2"></span>
            <a href="./shopping.html" class="r-4" style="color: rgb(136, 78, 34);"> <span>
                        <i class="iconfont">&#xe600;</i>
                        购物车</span>
            </a>
            <span class="s-3"></span>
            <a href="" id="phone">手机下单</a>
            <img src="./images/sm.png" alt="" id="rders">
        </div>
    </div>
</div>

<div class="header-2">
    <a href="index.html" class="header-2-1">
        <img src="images/logo.png" alt="">
    </a>
    <div class="header-4">
        <a href="" class="h-4-1">
            <i class="iconfont">&#xe668;</i>
            <span>400-060-1520</span>
        </a>
    </div>
</div>

<div class="nav">
    <img src="./images/huayishi.jpg" alt="">

    <div class="form">
        <div class="f-1">
            <span class="active">账号登录</span>
            <!-- <span>验证码登录</span> -->
        </div>
        <div class="cont" style="height: 260px; overflow: hidden;">
            <div class="f-2">
                <div class="f-2-1">
                    <img src="./images/touxiang.png" alt="">
                    <input id="login_id" type="text" placeholder="请输入手机号" onchange="phoneverify(this.value)">
                </div>
                <div class="f-2-1">
                    <img src="./images/mima.png" alt="">
                    <input id="password" type="password" placeholder="请输入密码">
                </div>
                <div class="f-2-2">忘记密码？</div>

                <div class="button">
                    <input type="button" value="登录" class="btn" id="submit">
                </div>

                <div class="f-2-3">
                    <img src="./images/zhifubao.png" alt="">
                    <a href="https://auth.alipay.com/login/index.htm?goto=https%3A%2F%2Fopenauth.alipay.com%3A443%2Foauth2%2FpublicAppAuthorize.htm%3Fapp_id%3D2021001167695057%26scope%3Dauth_user%26redirect_uri%3Dhttp%253A%252F%252Fcs.dinghuale.com%252Fapi%252Fhuidiao%26state%3D121.196.121.49">支付宝</a>

                    <img src="./images/weixin.png" alt="">
                    <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx4c5280fbb2d8e83c&redirect_uri=http%3A%2F%2Fcs.dinghuale.com%2Fapi%2Fwxhuidiao&response_type=code&scope=snsapi_login&state=121.196.121.49#wechat_redirect">微信</a>

                    <a href="./register.html" class="f-2-4">
                        <span>  注册账号 ></span>
                    </a>
                </div>
            </div>


            <div class="f-2">
                <div class="f-2-1">
                    <img src="./images/touxiang.png" alt="">
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div class="f-2-1">
                    <img src="./images/yanzhengma.png" alt="">
                    <input type="text" placeholder="请输入验证码">
                    <span>获取验证码</span>
                </div>

                <div class="button">
                    <input type="button" value="登录" class="btn">
                </div>

                <div class="f-2-3">
                    <img src="./images/zhifubao.png" alt="">
                    <a href="https://auth.alipay.com/login/index.htm?goto=https%3A%2F%2Fopenauth.alipay.com%3A443%2Foauth2%2FpublicAppAuthorize.htm%3Fapp_id%3D2021001167695057%26scope%3Dauth_user%26redirect_uri%3Dhttp%253A%252F%252Fcs.dinghuale.com%252Fapi%252Fhuidiao%26state%3D121.196.121.49">支付宝</a>

                    <img src="./images/weixin.png" alt="">
                    <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx4c5280fbb2d8e83c&redirect_uri=http%3A%2F%2Fcs.dinghuale.com%2Fapi%2Fwxhuidiao&response_type=code&scope=snsapi_login&state=121.196.121.49#wechat_redirect">微信</a>

                    <a href="./Login.html" class="f-2-4">
                        <span>  注册账号 ></span>
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>


<div class="bottom">
    <div class="bottom-1">
        <div class="bottom-1-1">
            <a href="">
                <img src="images/logo.png" alt="">
            </a>
        </div>

        <div class="bottom-2">
            <div class="bottom-2-1">
                <p>热门导航</p>
                <a href="./index.html" class="footer-nav-item">网站首页</a>
                <a href="./flower.html" class="footer-nav-item">网站首页</a>
                <a href="./order.html" target="_blank" class="footer-nav-item">订单查询</a>
                <a href="./flower.html" target="_blank" class="footer-nav-item">全部商品</a>


            </div>
            <div class="bottom-2-2">
                <div class="bottom-2-2-1">
                    <p>客服服务</p>
                    <a href="">关于我们</a>
                    <a href="">服务声明</a>
                    <a href="">订花流程</a>
                    <a href="">支付方式</a>
                </div>
                <div class="bottom-2-2-2">
                    <a href="">配送说明</a>
                    <a href="">售后服务</a>
                    <a href="">隐私条款</a>
                    <a href="">联系我们</a>
                </div>

            </div>
            <div class="bottom-2-3">
                <p>联系我们</p>
                <a href="">意见反馈</a>
                <a href="">工作时间：07:00-23:00</a>
                <a href="">7*24小时在线订购</a>
                <a href="">全国热线：400-060-1520</a>
            </div>


        </div>
        <div class="bottom-2-4">
            <img src="images/erweima.jpg" alt="" class="bottom-2-4-1">
            <p>扫码关注微信</p>
        </div>


    </div>


</div>

<div class="footer-bottom">
    <p class="text-color-9">Copyright©2020 &nbsp;成都勿忘我科技有限公司 &nbsp;
        </br>
        <a href="">蜀ICP备20016463号-2</a>&nbsp;
    </p>
</div>


</body>
<script src="js/login.js"></script>
<script src="js/jquery.2.2.4.js"></script>

<script>
    $("#submit").click(function () {
        // 收集用户输入的信息，通过ajax发往后端，等待返回信息
        $.ajax({
            url: "http://localhost:3000/api",
            data: {
                type: "login",
                username: $("#login_id").val(),
                password: $("#password").val()
            },
            success: res => {
                // 解析后端返回的信息，判断登录成功或是失败
                res = JSON.parse(res);
                console.log(res);
                // 成功
                if (res.code === 1) {
                    // 登录成功后，存储登录信息，以便登录守卫
                    localStorage.setItem("isLogin", "ok");
                    localStorage.setItem("username", res.data);
                    if (confirm("登录成功是否跳转到首页")) {
                        location.href = "./index.html"
                    }
                } else if (res.code === 0) {
                    if (confirm(res.title + "，登录失败，是否跳转到注册")) {
                        location.href = "./register.html"
                    }
                } else if (res.code === 2) {
                    // 失败
                    alert(res.title + "，登录失败")
                }
            }
        })
    })


    function phoneverify(phones) {
        var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (!myreg.test(phones)) {
            alert('手机号格式不正确')
            return false;
        }
        return true;
    }
</script>
</html>